<!--
 * @Author: wangming
 * @Date: 2021-04-21 10:40:46
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-05 13:40:33
 * @Description: file content
-->
<template>
  <el-input
    v-if="isEdit"
    :style="{
      width: config.__config.width + '%',
    }"
    :placeholder="config.__config.placeholder"
  />
  <tree-select
    v-else-if="config.__config.treeWalker"
    clearable
    :disabled="disabled"
    filterable
    :value="datas"
    :multiple="config.__config.multiple"
    :placeholder="config.__config.placeholder"
    @change="changes"
    :treeData="treeData"
    :style="{
      width: config.__config.width + '%',
    }"
    :fieldMap="fieldMap"
    valueString
    :disabledValue="'ReadOnly'"
    :readOnly="viewInfo"
  >
  </tree-select>
  <el-select
    v-else-if="!viewInfo"
    clearable
    :disabled="disabled"
    filterable
    :value="datas"
    :multiple="config.__config.multiple"
    :placeholder="config.__config.placeholder"
    @change="changes"
    :style="{
      width: config.__config.width + '%',
    }"
  >
    <el-option
      v-for="item in listData"
      :key="String(item.id)"
      :value="String(item.id)"
      :label="item.name"
    />
  </el-select>
  <div v-else>{{ viewData }}</div>
</template>

<script>
import vmMixin from "@/pageComponents/vmMixin";
import myMixin from "@/pageComponents/myMixin";
import { getHmorgListwithpermission } from "@/apis/paas/HmOrgController.js";
import { arrayToTree } from "@/utils/util";
import storeform from "@/store";
export default {
  mixins: [myMixin, vmMixin],
  computed: {
    getUserVal() {
      return storeform.getters.getUserVal;
    },
  },
  vmEvents: {
    getSelectData() {
      return this.originData.filter((i) => {
        if (this.config.__config.multiple) {
          return this.datas.indexOf(i.id + "") > -1;
        } else {
          return i.id == this.datas;
        }
      });
    },
  },
  data() {
    return {
      datas: "",
      originData: [],
      listData: [],
      treeData: [],
      viewData: "",
      fieldMap: {
        disabled: "accessLevel",
      },
    };
  },
  async created() {
    if (
      this.config.__config.defaultSelf &&
      this.value === undefined &&
      process.env.VUE_APP_USER !== "ADMIN"
    ) {
      const { orgId } = this.getUserVal;
      !!orgId && this.$emit("input", `[${orgId}]`);
    }
    this.originData = await getHmorgListwithpermission({ useCache: true });
    this.listData = this.originData.filter(
      (item) => item.accessLevel !== "ReadOnly"
    );
    this.treeData = arrayToTree(this.originData);
    this.def();
  },
  watch: {
    value: {
      handler: "def",
    },
  },
  methods: {
    changeChildForm() {
      if (!!this.descForm) {
        let desc = "";
        try {
          if (this.config.__config.multiple) {
            desc =
              this.listData
                .filter((i) => {
                  return this.datas.indexOf(i.id + "") > -1;
                })
                .map((i) => i.name) + "";
          } else {
            desc = this.listData.find((i) => this.datas == i.id).name;
          }
        } catch (error) {}
        this.descForm[this.config.modelName] = desc;
      }
    },
    changes(v) {
      if (this.config.__config.multiple) {
        this.$emit("input", (v || []).map((item) => `[${item}]`).join(""));
      } else {
        this.$emit("input", v ? `[${v}]` : "");
      }
      this.runEventName("change");
    },
    def() {
      let value;
      if (this.value) {
        value = (this.value + "").match(/[\w\u4e00-\u9fa5-]+/g);
      }
      if (this.config.__config.multiple) {
        this.datas = value || [];
      } else {
        this.datas = value ? value[0] : "";
      }
      if (this.viewInfo) {
        this.viewData =
          this.listData
            .filter(({ id }) =>
              this.config.__config.multiple
                ? this.datas.indexOf(id + "") > -1
                : this.datas == id
            )
            .map((i) => i.name) + "";
      }
      this.changeChildForm();
    },
  },
};
</script>

<style lang="scss" scoped></style>
